<script>
import { computed, defineComponent, reactive, unref } from 'vue'
import MakeForm, { MakeFormState } from '@Components/makeForm'
import * as Antd from 'ant-design-vue'
import { cloneDeep } from 'lodash'

export default defineComponent({
  emits: ['result', 'close'],
  props: {
    record: {
      type: Object,
      default: {},
    },
  },
  setup(props, context) {
    let record = computed(() => {
      return props.record
    })
    let form_config = [
      {
        key: 'title',
        initValue: record.value.title || null,
        uiType: 'input',
        col: { span: 24 },
        formItem: { label: '标题' },
        attr: {
          allowClear: true,
          placeholder: '标题',
        },
        rule: [
          {
            required: true,
            message: '请输入标题',
          },
          {
            max: 20,
            message: '标题长度最大20个字符',
          },
        ],
      },
      {
        key: 'description',
        initValue: record.value.description || null,
        uiType: 'textarea',
        col: { span: 24 },
        formItem: { label: '描述' },
        attr: {
          allowClear: true,
          placeholder: '描述',
        },
        rule: [
          {
            required: true,
            message: '请输入描述',
          },
        ],
      },
    ]
    let form_state = reactive({ data: MakeFormState(form_config) })

    let cancelHandler = () => {
      context.emit('close')
    }
    let submitHandler = () => {
      //context.emit('close')

      context.emit('result', {
        ...cloneDeep(form_state.data),
        record: {
          ...unref(record.value),
        },
      })
      context.emit('close')
    }
    return {
      form_state,
      form_config,
      submitHandler,
      cancelHandler,
    }
  },
  render() {
    return (
      <Antd.Row>
        <Antd.Col span={24}>
          <MakeForm
            ref="form_ref"
            formConfig={this.form_config}
            value={this.form_state.data}
          />
        </Antd.Col>

        <Antd.Col span={24}>
          <Antd.Space>
            <Antd.Button type="primary" onClick={this.submitHandler}>
              确定
            </Antd.Button>

            <Antd.Button type="primary" danger onClick={this.cancelHandler}>
              取消
            </Antd.Button>
          </Antd.Space>
        </Antd.Col>
      </Antd.Row>
    )
  },
})
</script>
